<template>
  <div class="manage">
    <!-- 新增/修改 弹出框 -->
    <el-dialog
      :title="operateType === 'add' ? '新增用户' : '更新用户'"
      :visible.sync="isShow"
      @close="Daingcolse"
    >
      <!-- 使用封装的表单组件 传递类型和数据源就好 -->
      <user-form  ref="form" :formLabel="operateFormLabel" :form="operateForm"></user-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addUser">新增</el-button>
      <user-form inline :formLabel="formLabel" :form="searchFrom" @getuserlists="getuserlist()">
        <el-button type="primary" @click="getuserlist()">搜索</el-button>
      </user-form>
    </div>
    <!-- 子组件传递事件出来 -->
    <user-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getuserlist"
      @edit="editUser"
      @del="deletd"
    ></user-table>
  </div>
</template>

<script>
import UserForm from "./children/UserForm";
import UserTable from "./children/UserTable";
import {
  getuserlist,
  edituserlist,
  deletduserlist,
  adduserlist,
} from "network/user";
export default {
  name: "User",
  components: {
    UserForm,
    UserTable,
  },
  data() {
    return {
      // 需要父组件传递的参数是
      //表单部分
      tableData: [],
      tableLabel: [
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "age",
          label: "年龄",
        },
        {
          prop: "sexLabel",
          label: "性别",
        },
        {
          prop: "birth",
          label: "出生日期",
          width: 250,
        },
        {
          prop: "addr",
          label: "地址",
          width: 600,
        },
      ],
      config: {
        page: 1,
        total: 30,
        loading: false,
      },

      // ipunt部分
      //搜索表单
      // 数据源 绑定的表单字段  v-model 封装成公共组
      searchFrom: {
        keyword: "",
      },
      // 表单描述文本
      formLabel: [
        {
          model: "keyword",
          label: "",
          //   下拉框字段 选项字段 可简写自己传递过去
          options: [],
        },
      ],
      //修改表单
      //  绑定的表单字段  v-model 封装成公共组 就是字段名
      operateForm: {
        name: "",
        addr: "",
        age: "",
        birth: "",
        sex: "",
      },
      // 表单描述文本对应的name值这些渲染 model  修改后更正的数据也是在这里了
      operateFormLabel: [
        {
          model: "name",
          label: "姓名",
        },
        {
          model: "age",
          label: "年龄",
        },
        {
          //添加类型下拉框的
          model: "sex",
          label: "性别",
          type: "select",
          options: [
            {
              label: "男",
              value: 1,
            },
            {
              label: "女",
              value: 0,
            },
          ],
        },
        {
          //添加类型日期选择器的
          model: "birth",
          label: "出生日期",
          type: "date",
        },
        {
          model: "addr",
          label: "地址",
        },
      ],
      // 控制对话框内容
      isShow: false,
      // 控制文本内容 新增和修改共享对话框
      operateType: "add",
    };
  },
  mounted() {
    this.getuserlist();
  },
  methods: {
    getuserlist() {
      this.config.loading = true;
      //通过在搜索框中获取
      var name = this.searchFrom.keyword;
      var page = this.config.page;
      getuserlist(name, page).then((res) => {
        this.tableData = res.list.map((item) => {
          //返回一个新的数组 元素就是item 的操作后的返回值 比如item*10 那就是 都是*10的值 数组存的
          //替换sex的切换 就是新增一个字段
          item.sexLabel = item.sex === 0 ? "女" : "男";
          return item;
        });
        this.config.total = res.count;
        this.config.loading = false;
      });
    },
    //接收子组件传递过来的时候 进行数据的更新  直接让其调用geilist
    // changePage(val) {
    //     this.getuserlist(val);
    // }
    Daingcolse() {
       this.$refs.form.colseDaing()
    },

    //编辑用户 接收了子组件传递出来的事件
    editUser(row) {
      this.operateType = "edit";
      this.isShow = true;
      //将表单中的赋值  展现出来
      this.operateForm = row;
    },
    //点击dialog确认后 提交修改请求的数据
    confirm() {
      // 先判断是哪个在操作 发送修改用的请求
      if (this.operateType === "edit") {
        edituserlist(this.operateForm).then((res) => {
          // console.log(res);
          this.isShow = false;
          this.getuserlist();
          this.$message({
            type: "success",
            message: "修改用户成功!",
          });
        });
      } else {
        adduserlist(this.operateForm).then((res) => {
          this.isShow = false;
          this.getuserlist();
          this.$message({
            type: "success",
            message: "新增用户成功!",
          });
        });
      }
    },

    //删除操作
    deletd(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 在成功里面做删除成功后的操作
          deletduserlist(id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //也可以直接从数据总删除就好 通过 splie方法 不用再去调用接口
            this.getuserlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //新增用户
    addUser() {
      this.isShow = true;
      this.operateForm = {}
      this.operateType = 'add'
    },
  },
};
</script>

<style lang="scss" scoped>
@import "assets/scss/common";
</style>